<template>
    <div style="min-height: 1000px;">
        <!--        firstTimeCards: {{firstTimeCards}}-->
        <!--        <img src="card/card1.jpg">-->
        <el-row>
            <el-col align="left" style="margin-bottom: 5px;">
                <el-select v-model="collectColumnOrder"  @change="changeCollectColumnOrder">
                    <el-option
                            v-for="item in collectColumnOrderOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="primary"  @click="shuffle" style="margin-left:5px;">洗牌</el-button>
            </el-col>
        </el-row>

        <hr/>
        <el-row>
            <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 400px;">
                <h1>原始牌（第一次）</h1>
                <div style="margin-bottom:10px;">
                    意向数字在第几列：
                    <el-select v-model="firstTimeColumn"  clearable @change="changFirstTimeColumn" >
                        <el-option
                                v-for="item in columnOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div style="position: relative;">
                    <span v-for="(itemIndex, incrementalIndex) in firstTimeCards" :key="incrementalIndex" style="margin: 5px 5px;">
                        <img :src="getImgSrc(itemIndex)" :class="{'sel_card': getFirstTimeSelectedCls(incrementalIndex) }" :style="{'position': 'absolute', 'left': getLeft(incrementalIndex, 1), 'top': getTop(incrementalIndex)}">
                        <div v-if="(incrementalIndex + 1) % 3 == 0"></div>
                    </span>
                </div>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="8" v-show="secondTimeCards && secondTimeCards.length > 0 && firstTimeColumn"  style="margin-bottom: 400px;">
                <h1>第二次</h1>
                <div style="margin-bottom:10px;">
                    意向数字在第几列：
                    <el-select v-model="secondTimeColumn"  clearable @change="changSecondTimeColumn">
                        <el-option
                                v-for="item in columnOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div style="position: relative;">
                    <span v-for="(itemIndex, incrementalIndex) in secondTimeCards" :key="incrementalIndex" style="margin: 5px 5px;">
                        <img :src="getImgSrc(itemIndex)" :class="{'sel_card': getSecondTimeSelectedCls(incrementalIndex) }" :style="{'position': 'absolute', 'left': getLeft(incrementalIndex, 2), 'top': getTop(incrementalIndex)}">
                        <div v-if="(incrementalIndex + 1) % 3 == 0"></div>
                    </span>
                </div>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="8" v-show="thirdTimeCards && thirdTimeCards.length > 0 && secondTimeColumn"  style="margin-bottom:400px;">
                <h1>第三次</h1>
                <div style="margin-bottom:10px;">
                    意向数字在第几列：
                    <el-select v-model="thirdTimeColumn"  clearable>
                        <el-option
                                v-for="item in columnOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div style="position: relative;">
                    <span v-for="(itemIndex, incrementalIndex) in thirdTimeCards" :key="incrementalIndex" style="margin: 5px 5px;">
                        <img :src="getImgSrc(itemIndex)" :class="{'sel_card': getThirdTimeSelectedCls(incrementalIndex) }" :style="{'position': 'absolute', 'left': getLeft(incrementalIndex, 3), 'top': getTop(incrementalIndex)}">
                        <div v-if="(incrementalIndex + 1) % 3 == 0"></div>
                    </span>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "card1.vue",
        data() {
            return {
                allCards: [],
                firstTimeColumn: null,
                secondTimeColumn: null,
                thirdTimeColumn: null,
                columnOptions: [{
                    value: '0',
                    label: '第1列'
                }, {
                    value: '1',
                    label: '第2列'
                }, {
                    value: '2',
                    label: '第3列'
                }],
                collectColumnOrderOptions: [{
                    value: 0,
                    label: '意向数字列先收'
                }, {
                    value: 1,
                    label: '意向数字列第二次收'
                }, {
                    value: 2,
                    label: '意向数字列最后收'
                }],
                collectColumnOrder: 1,
            }
        },
        methods: {
            changeCollectColumnOrder() {
                this.firstTimeColumn = null
                this.secondTimeColumn = null
                this.thirdTimeColumn = null
            },
            shuffle() {
                this.allCards.sort(() => Math.random() - 0.5)
                this.firstTimeColumn = null
                this.secondTimeColumn = null
                this.thirdTimeColumn = null
            },
            getImgSrc(itemIndex) {
                return "card/card" + itemIndex + ".jpg"
            },
            getLeft(index, level) {
                let left = (parseInt(index) % 3) * 130

                if(level == 2 && this.getSecondTimeSelectedCls(index)) {
                    left -= 20
                }
                if(level == 3 && this.getThirdTimeSelectedCls(index)) {
                    left -= 20
                }

                left = left + 'px'
                return left
            },
            getTop(index) {
                let top = parseInt(index / 3) * 50
                top = top + 'px'
                return top
            },
            getFirstTimeSelectedCls(index) {
                return this.firstTimeColumn && (index - this.firstTimeColumn) % 3 == 0
            },
            getSecondTimeSelectedCls(index) {
                let startIndex = 0
                let endIndex = 0
                switch (this.collectColumnOrder) {
                    case 0:
                        startIndex = 0
                        endIndex = 8
                        break
                    case 1:
                        startIndex = 9
                        endIndex = 17
                        break
                    case 2:
                        startIndex = 18
                        endIndex = 26
                        break
                }
                return this.secondTimeColumn && (index - this.secondTimeColumn) % 3 == 0 && index >= startIndex && index <= endIndex
            },
            getThirdTimeSelectedCls(index) {
                let delta = 0
                switch (this.collectColumnOrder) {
                    case 0:
                        delta = 0
                        break
                    case 1:
                        delta = 12
                        break
                    case 2:
                        delta = 24
                        break
                }
                return this.thirdTimeColumn && (index - this.thirdTimeColumn) == delta
            },
            changFirstTimeColumn() {
                this.secondTimeColumn = null
                this.thirdTimeColumn = null
            },
            changSecondTimeColumn() {
                this.thirdTimeColumn = null
            },
            combineData(selColumnIndex, cardArrData) {
                let cards = []
                if(cardArrData && cardArrData.length > 0 && selColumnIndex) {
                    let otherColumns = [0, 1, 2].filter(columnIndex =>  columnIndex != selColumnIndex)
                    let destCardArr = []
                    let otherColumn0Arr = []
                    let otherColumn1Arr = []
                    for(let i = parseInt(selColumnIndex); i < cardArrData.length; i+=3) {
                        destCardArr.push(cardArrData[i])
                    }
                    // console.log('otherColumns:', otherColumns)
                    for(let i = otherColumns[0]; i < cardArrData.length; i+=3) {
                        otherColumn0Arr.push(cardArrData[i])
                    }
                    for(let i = otherColumns[1]; i < cardArrData.length; i+=3) {
                        otherColumn1Arr.push(cardArrData[i])
                    }

                    switch(this.collectColumnOrder) {
                        case 0:
                            cards.push(...destCardArr)
                            cards.push(...otherColumn0Arr)
                            cards.push(...otherColumn1Arr)
                            break
                        case 1:
                            cards.push(...otherColumn0Arr)
                            cards.push(...destCardArr)
                            cards.push(...otherColumn1Arr)
                            break
                        case 2:
                            cards.push(...otherColumn0Arr)
                            cards.push(...otherColumn1Arr)
                            cards.push(...destCardArr)
                            break
                    }
                }
                return cards
            },
        },
        computed: {
            firstTimeCards() {
                if(this.allCards && this.allCards.length > 0) {
                    return this.allCards.slice(0, 27)
                }
                return []
            },
            secondTimeCards() {
                return this.combineData(this.firstTimeColumn, this.firstTimeCards)
            },
            thirdTimeCards() {
                return this.combineData(this.secondTimeColumn, this.secondTimeCards)
            },
        },
        mounted() {
            for(let i = 1; i <= 54; i++) {
                this.allCards.push(i)
            }
        },
    }
</script>

<style scoped>
    .sel_card {
        border: 3px solid #21f374;
    }
</style>
